import Taro, {Component, Config} from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
import {SDBody, SDCountDown} from 'sudao-ui'
import SDUtils from 'sudao-utils'

import SDButton from '../../../../comps/sd-button'

import './index.less'

type IPageState = {
  countDownTitle: string
}

export default class MobileValidPage extends Component<{}, IPageState> {

  constructor () {
    super(...arguments)
    this.state = {
      countDownTitle: '获取验证码'
    }
  }

  config: Config = {
    navigationBarTitleText: '绑定手机号'
  }

  render () {
    const { statusBarHeight } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    const { countDownTitle } = this.state

    return (
      <SDBody sd-class='container'>
        <View className="cell-item border-bottom_1px">
          <Input className="cell-input" placeholder='请输入手机号' placeholderStyle='color: #999;' />
        </View>
        <View className="cell-item border-bottom_1px">
          <Input className="cell-input" placeholder='请输入验证码' placeholderStyle='color: #999;' />
          <View className="cell-item__right">
            <SDCountDown duration={60} title={countDownTitle} onRender={this.onCountDownRender} onEnd={this.onCountDownEnd} onTaped={this.sendValidCode} />
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <SDButton height={96} sd-class='btn-payment' onClick={this.gotoNext}>绑定手机号</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  gotoNext = () => {
    SDUtils.showMsg('绑定成功')
  }

  onCountDownEnd = () => {
    this.setState({
      countDownTitle: `重新获取`
    })
  }

  onCountDownRender = (currentDuration: number) => {
    this.setState({
      countDownTitle: `${currentDuration}s`
    })
  }

  sendValidCode = () => {
    console.log('发送验证码')
  }
}
